<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
 <el-form-item label="宿舍号" prop="locationName">
   <el-input
     v-model="queryParams.locationName"
     placeholder="请输入宿舍号"
     clearable
     size="small"
     style="width: 240px"
     @keyup.enter.native="handleQuery"
   />
 </el-form-item>

 <el-form-item label="考勤时间" >
        <el-date-picker clearable
          v-model="queryParams.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

 <el-form-item>
   <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
   <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
 </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dormitoryList">
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="宿舍栋号" align="center" prop="levelName"  />
      <el-table-column label="楼层" align="center" prop="level" />
      <el-table-column label="宿舍号" align="center" prop="locationName" :show-overflow-tooltip="true" />
      <el-table-column label="实住人数" align="center" prop="dormitoryCount" :show-overflow-tooltip="true" />
      <el-table-column label="考勤状态" align="center" prop="attendanceStatus"  >
        <template slot-scope="scope">
          <span>{{ scope.row.attendanceStatus==1?'全勤':'非全勤' }}</span>
        </template>
        </el-table-column>
      <el-table-column label="考勤时间" align="center" prop="modifyTime" width="160">
        <template>
          <span>{{ parseTime(this.queryParams.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="考勤登记" v-hasPermi="['class:info:edit']" placement="top">
            <el-button size="mini" circle type="success" icon="el-icon-edit" @click="handleEntryRecords(scope.row)" />
          </el-tooltip>       
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="学生出勤信息" :visible.sync="studentDialogVisible" width="60%">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
      <el-table :data="form.studentList" :model="form" style="width: 100%"  v-loading="studentLoading" >
        <el-table-column prop="studentId" label="学号" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="80" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="130"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="className" label="班级" width="80"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="classTeacherId" label="班主任" width="80"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="teacherPhone" label="班主任联系电话" width="130"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="guardianName" label="监护人姓名" width="100" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="guardianPhone" label="监护人联系电话" width="130" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80" align="center" >
            <template slot-scope="scope">
                 <span>{{["异常", "正常", "请假"][scope.row.status]}}</span>   
            </template>
        </el-table-column>
        <el-table-column label="考勤是否正常" width="200" align="center" prop="isNormal">
                  <template slot-scope="scope" >
                    <el-radio :disabled="checkSelectAble()" v-model="scope.row.isNormal" label="0">异常</el-radio>
                    <el-radio :disabled="checkSelectAble()" v-model="scope.row.isNormal" label="1">正常</el-radio>
                  </template>
        </el-table-column>
        
      </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
  </div>  
</template>

<script>
import {getDormitoryAttendanceList, getDormitoryStudentInfo, editDormitoryAttendance} from "@/api/attendance/dormitory"
import moment from 'moment';

export default {
  name: "dormitoryAttendance",
  data() {
    return {
        loading:false,
        dormitoryList:[],
        dateTime: undefined,
         // 总条数
        total: 0,
           // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createTime: new Date()
      },
      form: {
        studentList: []
      },
      studentLoading:false,
      studentDialogVisible:false,
      rules: {

        },
    };
    },
    created() {
        this.getList();
    },
    methods: {
            /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.createTime = new Date();
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
            this.loading = true
        getDormitoryAttendanceList(this.queryParams).then(response => {
            this.dormitoryList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
        });
    },
    handleEntryRecords(row) {
        this.studentDialogVisible = true
        this.studentLoading = true
        console.log(this.queryParams.createTime)
        getDormitoryStudentInfo({id:row.id, createTime:this.queryParams.createTime}).then(response => {
             this.form.studentList = response.data 
             this.studentLoading = false
        });
        
    },
    // 取消按钮
     cancel() {
        this.studentDialogVisible = false;
      },
    submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            editDormitoryAttendance(this.form.studentList).then(resp=>{
                this.msgSuccess("提交成功");
                this.studentDialogVisible = false;
                this.getList();
            })
          }
        });
    },
    checkSelectAble() {
        return moment(new Date()).format("YYYY-MM-DD") != moment(this.queryParams.createTime).format("YYYY-MM-DD");
    }
}
};
</script>
